<template>
	<view class="wrap">
		<!-- 头部搜索 -->
		<view class="wrap__header">
			<!-- <text class="header__title">{{$t('find.title')}} </text> -->
			<view class="header__search" @click="navTo('/pages/find/search')">
				<image src="@/static/icons/search.png" mode="widthFix" class="search__icon"></image>
				<view class="search__input">{{$t('find.search')}}</view>
			</view>
			<image src="@/static/icons/msg.png" class="header__msg" @click="jump()"></image>
		
		
		</view>
		<view class="wrap__swiper">
			 <u-swiper
			            :list="banners"
			            keyName="image"
			            showTitle
			            :autoplay="false"
			            circular
			    ></u-swiper>
			
			<!-- <swiper :indicator-dots="true" :autoplay="true" indicator-active-color="#fff" class="swiper__main">
				<swiper-item  class="main__item" v-for="(item, index) in banners" :key="index">
					<image :src="item" mode="aspectFill" class="item__img"></image>
				</swiper-item>
			</swiper> -->
		</view>
		<!-- 熱股 -->
		<view class="wrap__hot">
			<view class="hot__title">{{$t('find.hot')}}</view>
			<view class="hot__list">
				<view class="list__item" v-for="(item,index) in hotStockList" :key="index" 
				@click="itemClick(item)">
					<text :class="['item__tag', 'item__tag--'+ item.nameCode]">{{item.code}}</text>
					<view class="item__title">{{item.name}}</view>
					<view :class="['item__value', item.zhangdieshu > 0 ? 'item__value--down':'']">
						<text class="value_text">{{item.zhangdieshu}}</text>
						<text class="value_text">{{(item.zhangdiebaifenbi)}}%</text>
					</view>
				</view>
			</view>
		</view>
		<view class="wrap__msg">
			<view class="msg__title">{{$t('find.msg')}}</view>
			<view class="msg__list">
				<view class="list__item" v-for="(item,index) in newsList" :key="index" 
				@click="newsClick(item.id)">
					<view class="item__info">
						<view class="info__title">{{item.title}}</view>
						<view class="info__time">{{item.updatetime}}</view>
					</view>
					<view class="item__img">
						<image :src="item.image" mode="aspectFill" class="img__post"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getUrlParams, formatDate} from '@/common/js/utils.js'
	import {mapState} from 'vuex'
	
	export default {
		components: {
		},
		data() {
			return {
				newsList:[], //新闻列表
				hotStockList:[], //热门股票列表
				banners:[],
				msgList:[], 
			}
		},
		filters:{
			formatTime(time){
				return formatDate(time*1000)
			},
			formatNum(rate){
					let num = rate.toFixed(2)
					return num === "0.00" ? "0.01" : num
			}
		},
		computed:{
			...mapState("user", ["configData"]),
			// banners(){
			// 	let config = this.configData || []
			// 	let info = config.find(item=>{
			// 		return item.name === "banner"
			// 	})
			// 	return info ? info.value : []
			// }
		},
		onLoad() {
			//获取热门股票
			this.getHotStock()
			// 获取新闻列表
			this.getNewsList()
			this.banners1()
			
			this.getConfig()
			
			
		},
		methods: {
			async getConfig(){
				let res = await this.$api.getConfig()
				if(res.code === 1 && res.data){
					this.msgList = res.data
				
				}
			},
			jump(){
				window.location.href = this.msgList.msg_text
			},
			// 获取新闻列表
			async getNewsList(){
				let res = await this.$api.getNewsList()
				if(res.code === 1 && res.data){
					this.newsList = res.data
				}else{
					uni.showToast({
						title: res.msg,
						icon:"none"
					})
				}
			},
			async banners1(commit){
				
			 let res = await this.$api.getConfigInfo()
			  console.log("配置i细腻",res)
			 if(res.code === 1 && res.data){
			 		let info = res.data.find(item=>{
			 			return item.name === "banner"
			 		})
			 		let bann =  info ? info.value : [];
					this.banners = bann
			 }
			
			},
			// 获取首页热门股票列表
			async getHotStock(){ 
				let res = await this.$api.getHotStock(0)
				if(res.code === 1 && res.data){
					this.hotStockList = res.data.map(item=>{
						item.nameCode = item.zimudaima
						return item
					})
				}
			},
			// 新闻点击
			newsClick(id){
				uni.navigateTo({
					url:`/pages/find/newsDetail?id=${id}`
				})
			},
			itemClick({id}){
				uni.navigateTo({
					url:`/pages/account/stockDetail?id=${id}`
				})
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		min-height: 100vh;
		padding: 0 30rpx;
		padding-top: 50rpx;
		box-sizing: border-box;
		.wrap__header{
			@include flexRowAlign(space-between);
			.header__title{
				font-size: 46rpx;
				font-weight: 800;
				color: #161827
			}
			.header__search{
				@include flexRowAlign();
				width: 614rpx;
				height: 72rpx;
				background: #2E303D;
				border-radius: 8rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				.search__icon{
					width: 36rpx;
					height: 36rpx;
				}
				.search__input{
					font-size: 30rpx;
					color: #797979;
					margin-left: 30rpx;
				}
			}
			.header__msg{
				width: 34rpx;
				height: 34rpx;
			}
		}
		.wrap__swiper{
			margin-top: 34rpx;
			.swiper__main{
				height: 330rpx;
				.main__item{
					height: 330rpx;
					background-color: transparent; /* 去掉背景色 */
					.item__img{
						width: 690rpx;
						height: 280rpx;
						border-radius: 12rpx;
						box-sizing: border-box;
					}
				}
			}
		}
		
		.wrap__hot{
			margin-top: 10rpx;
			.hot__title{
				font-size: 34rpx;
				font-weight: 800;
				color:#fff;
			}
			.hot__list{
				margin-top: 30rpx;
				@include flexRowAlign();
				flex-wrap: nowrap;
				width: 690rpx;
				overflow-x: scroll;
				.list__item{
					flex-shrink: 0;
					width: 240rpx;
					height: 160rpx;
					background: #F6F6F6;
					border-radius: 8rpx;
					padding: 12rpx;
					box-sizing: border-box;
					@include flexCenter(column);
					margin-right: 20rpx;
					position: relative;
					background-color: #1D1F2E;
					.item__title{
						font-size: 26rpx;
						font-weight: bold;
						color: #fff;
						margin-top: 28rpx;
						height: 72rpx;
						@include textOver();
						width: 100%;
					}
					.item__value{
						width: 100%;
						// padding: 0 16rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						color: #FF3B46;
						margin-top: 10rpx;
						@include flexRowAlign(space-between);
					}
					.item__value--down{
							color: #2DC065;
					}
					.item__tag{
						color: #fff;
						padding: 0rpx 4rpx;
						font-size: 24rpx;
						border-radius: 8rpx 0 8rpx 0;
						background: #FF3B46;
						@include flexCenter();
						position: absolute;
						left: 0;
						top: 0;
					}
					.item__tag--US{
						background: #0369F6;
					}
					.item__tag--HK{
						background: #DE2804;
					}
				}
			}
		}
		.wrap__msg{
			margin-top: 60rpx;
			.msg__title{
				font-size: 34rpx;
				font-weight: 800;
				color: #161827;
			}
			.msg__list{
				margin-top: 30rpx;
				.list__item{
					height: 220rpx;
					background: #161827;
					// border-top: 1rpx solid #EEEEEE;
					// border-bottom: 1rpx solid #EEEEEE;
					@include flexRowAlign(space-between);
					.item__info{
						.info__title{
							font-size: 28rpx;
							font-weight: 500;
							color: #fff;
							max-width: 388rpx;
						}
						.info__time{
							font-size: 24rpx;
							font-weight: 500;
							color: #BBBBBB;
							margin-top: 46rpx;
						}
					}
					.item__img{
						width: 270rpx;
						height: 180rpx;
						border-radius: 10rpx;
						background: #f2f2f2;
						margin-left: 24rpx;
						flex-shrink: 0;
						.img__post{
							width: 270rpx;
							height: 180rpx;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
	}
</style>